<template>
  <div class="container">
    <div class="bar-header">
        <el-form inline class="searchItem">
          <el-form-item label="选择项目">
              <el-select
                  v-model="code"
                  filterable
                  placeholder="请选择项目"
                  transfer
                  style="width: 180px;"
              >
                  <el-option
                      v-for="item in projectList"
                      :key="item.key"
                      :value="item.key"
                      :label="item.value.name"
                  />
              </el-select>
          </el-form-item>
      </el-form>
    </div>
    <div class="bar-container">
        <!-- <el-input
            class="powerInput"
            v-model="name"
            size="small"
            clearable
            placeholder="请输入项目名称"
        /> -->
        <BaseTree
            :isSearch="true"
            :data="treeDataByEnergy"
            :expandClick="false"
            @nodeClick="treeNodeClick"
            @nodeCollapse="treeNodeCollapse"
            :defaultProps="defaultProps"
            :defaultExpandedkeys="defaultExpandedkeys"
        />
    </div>
  </div>
</template>

<script>
import BaseTree from '@/components/BaseTree'
import { findProArchiveOptions } from '@/api/proArchive'
export default {
  components: {
      BaseTree,
  },
  data() {
      return {
          code: '',
          projectList: [
            {
                key: 1,
                value: {
                    name: '项目1',
                    ENGname: 'station1'
                }
            },
            {
                key: 2,
                value: {
                    name: '项目2',
                    ENGname: 'station2'
                }
            },
            {
                key: 3,
                value: {
                    name: '项目3',
                    ENGname: 'station3'
                }
            },
          ],
          selectedItem: null,
          selectedItemData: null,
          treeData: [],
          currentNodeKey: '',
          defaultProps: {
              isLeaf: 'isLeaf',
              children: 'children',
              label: 'name',
              id: 'id',
          },
          defaultExpandedkeys: [],
          
      }
  },
  created() {
      window.addEventListener('resize', this.changeTableStyle)
      findProArchiveOptions().then((res) => {
          if (res.code == '200') {
              this.projectList = res.data || []
          }
      })
  },
  destroyed() {
      window.removeEventListener('resize', this.changeTableStyle)
  },
  computed: {
      treeDataByEnergy() {
        //   return this.treeData.filter((item) => item.energyType === this.energyType) || []
          return this.treeData.filter((item) => item.projectId === this.code) || []
      },
  },
  methods: {
    treeNodeExpand(params) {
        let { data, node, self } = params
        this.defaultExpandedkeys.push(data.id)
    },
    treeNodeCollapse(params) {
        let { data, node, self } = params
        this.defaultExpandedkeys = this.defaultExpandedkeys.filter(
            (item) => item != data.id
        )
    },
    treeNodeClick(data, node, slef) {
        if (!data.data.energyType) {
            this.$message.warning('请先绑定能源类型')
            return
        }
        this.treeNodeId = data.data.id
        this.treeNodeData = data.data
        this.pageQuery.condition.id = this.treeNodeId
        //this.getTableData();
        //获取节点绑定的计量器具
        //this.loadTableData();
        const tableRef = this.$refs.deviceTable
        if (tableRef) {
            tableRef.treeNodeId = data.data.id
            tableRef.handleOnChange()
        }
    },
  }
}
</script>

<style lang="scss" scoped>
    .container {
        height: 100%;
    }
    .bar-header {
        padding: 20px 10px;
        margin-bottom: 15px;
        background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
        box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
        border: 1px solid rgba(0, 144, 242, 0.58); 
        border-radius: 10px;
        .searchItem {
            display: flex;
            justify-content: center;
        }
    }
    .bar-container {
        flex: 1;
        height: calc(100vh - 220px);
        overflow-y: auto;
        padding: 0 10px;

        background: linear-gradient(90deg, rgba(5, 59, 128, 1), rgba(1, 22, 57, 1));
        box-shadow: 0px 4px 8px 0px rgba(0,17,46,0.5);
        border: 1px solid rgba(0, 144, 242, 0.58); 
        border-radius: 10px;
    }
    .powerInput {
        margin-top: 12px;
        margin-bottom: 5px;
    }
    .item {
        margin-top: 10px;
        height: 60px;
        padding: 13px 0 0 18px;
        background: linear-gradient( 129deg, #00C3EE 0%, #0085F8 100%);
        cursor: pointer;
        display: flex;
        gap: 12px;
        border-radius: 2px;
        .item-num {
            height: 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .item-name {
            height: 22px;
            font-family: PingFang SC, PingFang SC;
            font-weight: normal;
            font-size: 15px;
            color: #FFFFFF;
            line-height: 22px;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        &:hover {
            color: #fff;
            background: #409eff !important;
        }
        &.active {
            color: #fff;
            background-color: #409eff;
        }
    }
    
    ::v-deep .el-form-item {
        margin-bottom: 0 !important;
        line-height: 36px !important;
        height: 36px !important;
        margin-right: 0 !important;
    }
    ::v-deep .el-form-item__label {
        line-height: 36px !important;
        height: 36px!important;
    }
    ::v-deep .el-form-item__content {
        line-height: 36px !important;
        height: 36px !important;
    }
    ::v-deep .el-input__inner {
        line-height: 32px !important;
        height: 32px !important;
    }
</style>
